<template>
  <div class="min-h-screen flex items-center justify-center p-4">
    <div class="card w-full max-w-lg shadow-2xl error-container bg-base-100/80">
      <div class="card-body text-center">
        <!-- 错误图标 -->
        <div class="error-animation mb-6">
          <div class="w-32 h-32 bg-error text-error-content rounded-full flex items-center justify-center mx-auto">
            <font-awesome-icon icon="exclamation-triangle" size="4x" />
          </div>
        </div>

        <!-- 错误信息 -->
        <h1 class="text-6xl font-bold text-error mb-2">403</h1>
        <h2 class="text-2xl font-semibold text-base-content mb-4">无权访问</h2>

        <p class="text-base-content/70 mb-6">
          抱歉，您访问的页面不存在或已被移动。
        </p>

        <!-- 可能的原因 -->
        <div class="bg-base-200 rounded-lg p-4 mb-6 text-left">
          <div class="flex items-center mb-2">
            <font-awesome-icon icon="question-circle" />
            <span class="font-medium">可能的原因：</span>
          </div>
          <ul class="text-sm space-y-1">
            <li>• 网址输入错误</li>
            <li>• 页面已被删除</li>
            <li>• 链接已过期</li>
          </ul>
        </div>

        <!-- 操作按钮 -->
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <button onclick="window.history.back()" class="btn btn-outline btn-primary">
            <font-awesome-icon icon="arrow-left" />
            返回上一页
          </button>

          <router-link class="btn btn-primary" to="/">
            <font-awesome-icon icon="home" />
            返回首页
          </router-link>

          <button onclick="location.reload()" class="btn btn-outline">
            <font-awesome-icon icon="refresh" />
            刷新页面
          </button>
        </div>

        <!-- 搜索框 -->
        <div class="mt-8">
          <div class="join w-full max-w-md">
            <input
                type="text"
                placeholder="搜索您需要的内容..."
                class="input input-bordered join-item w-full"
            />
            <button class="btn btn-primary join-item">
              <font-awesome-icon icon="search" />
            </button>
          </div>
        </div>

        <!-- 联系支持 -->
        <div class="mt-6 text-sm text-base-content/60">
          <p>
            需要帮助？
            <a href="#" class="text-primary hover:underline">联系技术支持</a>
          </p>
        </div>
      </div>
    </div>
  </div>

</template>